import { CSSProperties, FC } from 'react'
import { Graph, Node } from '@antv/x6'
import { AssetCard } from '@/components/graph/assets/AssetCard/AssetCard'
import { useColorVar, useStyles } from '@/hooks/styles'
import styles from './AudioAsset.module.scss'
import { SvgIcon } from '@/components/icons'
import { IconAudio } from '@/components/icons/IconAudio'
import { Port } from '@/components/graph/Port/Port'
import ReactAplayer from 'react-aplayer'

interface IAudioAsset {
  width?: CSSProperties['width']
  turnToAsset?: () => void
  node?: Node
  graph?: Graph
  audiourl: string
}
// https://www.npmjs.com/package/react-aplayer

export const AudioAsset: FC<IAudioAsset> = ({
  width,
  turnToAsset,
  node,
  graph,
  audiourl,
}) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  const props = {
    theme: c('Green-main'),
    lrcType: 3,
    audio: [
      {
        name: '访谈音频1',
        artist: 'Teddy',
        url: audiourl,

        theme: c('Green-light'),
      },
    ],
  }

  return (
    <AssetCard
      width={width}
      headerColor={c('Green-background')}
      cardTitle={'音频'}
      cardIcon={<SvgIcon icon={IconAudio} />}
      // turnToAsset={() => turnToAsset && turnToAsset()}
      node={node}
      graph={graph}
    >
      <div {...styleClass(['layout'])}>
        <div>
          <ReactAplayer
            {...props}
            onInit={() => console.log()}
            onPlay={() => console.log()}
            onPause={() => console.log()}
          />
        </div>
        <div {...styleClass(['port-wrapper'])}>
          <Port circleColor={c('Green-main')} borderColor={c('Green-light')} />
        </div>
      </div>
    </AssetCard>
  )
}
